<template>
	<view class="userContainer">
		<view class="userAvatar">
			<u--image :src="defaultAvatarUrl" width="200px" height="200px" @click="changeAvatar" shape="circle"
				mode="center" v-if="avatarUrl==null"></u--image>
			<u--image :src="avatarUrl" width="200px" height="200px" @click="changeAvatar" shape="circle"
				v-else></u--image>
		</view>
		<view class="uid">
			uid：{{userInfo.data.data.id}}
		</view>
		<view class="userOtherMessage">
			<u-cell-group>
				<u-cell size="large" title="昵称" :value="userName" isLink @click="setUserName"></u-cell>
				<u-cell size="large" title="性别" :value="userSex" isLink @click="setUserSex"></u-cell>
				<u-cell size="large" title="手机号" :value="userPhone" isLink @click="setUserPhone"></u-cell>

			</u-cell-group>
			
			<u-button  color="#62d8d6" throttleTime="500" text="提交保存" @tap="toUpdateUserMessage"></u-button>
		</view>

		<!-- 设置昵称弹出层 -->
		<u-popup :show="show" mode="bottom" @close="close" class="popupPage">
			<u--input placeholder="请输入昵称(汉字,字母,数字,下划线,减号,长度为2-7)" border="surround" v-model="userName"
				v-if="chooseItem==1"></u--input>

			<u--input placeholder="请输入手机号" type="number" border="surround" v-model="userPhone"
				v-else-if="chooseItem==3"></u--input>


			<view class="xingbie" v-else-if="chooseItem==2">
				<u-radio-group v-model="userSex" placement="column" borderBottom='true'
				iconPlacement='right' size='50'>
					<u-radio :customStyle="{marginBottom: '8px'}" iconSize='0' v-for="(item, index) in userSelSex" :key="index"
					 labelSize='40rpx'	:label="item.value" :name="item.value">
					</u-radio>
				</u-radio-group>
			</view>

		</u-popup>

		<!-- 遮罩层 -->
		<u-overlay :show="toOverlay" mask-click-able="false">
			<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
		</u-overlay>


	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				avatarUrl: null,
				defaultAvatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				tempFilePaths: null,
				show: false,
				userName: '',
				userPhone: '',
				toOverlay: false,
				userSex: '',
				userSelSex: [{
					value: "男",
					disabled: false
				}, {
					value: "女",
					disabled: false
				}],
				chooseItem: 0 //1为昵称 2为性别 3为手机号
			}
		},
		methods: {
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					//上传头像
					success: (chooseImageRes) => {
						this.tempFilePaths = chooseImageRes.tempFilePaths;
						const tempFiles = chooseImageRes.tempFiles;
						let resSize = tempFiles[0].size;
						if (resSize > 1048576) {
							return uni.showToast({
								title: "上传图片大小不超过1MB",
								icon: "error"
							})
						}
						this.avatarUrl=chooseImageRes.tempFilePaths[0]
					}
				});
			},
			setUserName() {
				//设置姓名
				this.show = true
				this.chooseItem = 1
				if (this.userName=="(请输入用户名)") {
					this.userName = '' //清空null提示
				}
				

			},
			setUserSex() {
				//设置性别
				this.show = true
				this.chooseItem = 2
				if(this.userSex == "(请选择性别)"){
				this.userSex = '' //清空null提示
				}
			},
			setUserPhone() {
				//设置手机号
				this.show = true
				this.chooseItem = 3
				if (this.userPhone=="(请输入手机号)") {
					this.userPhone = '' //清空null提示
				}
			},
			close() {
				this.show = false //关闭弹出层
				// 验证输入内容合法性
				//手机号
				if (!uni.$u.test.mobile(this.userPhone) && this.chooseItem == 3) {
					uni.showToast({
						title: "手机号有误",
						icon: "error",
						duration: 1000
					})
					this.userPhone = ''
				}
				// 用户名  规则汉字,字母,数字,下划线,减号,长度为2-7
				let isUserName = /^[\u4e00-\u9fa5a-zA-Z0-9_-]{2,7}$/
				if (!isUserName.test(this.userName) && this.chooseItem == 1) {
					uni.showToast({
						title: "昵称有误",
						icon: "error",
						duration: 1000
					})
					this.userName = ''
				}
				
				
				this.toJudgmentNull() //显示提示语



			},
			//提示输入语
			toJudgmentNull() {

				if (this.userName == null || this.userName == '') {
					this.userName = "(请输入用户名)"
				}
				if (this.userSex == null || this.userSex == '') {
					this.userSex = "(请选择性别)"
				}
				if (this.userPhone == null || this.userPhone == '') {
					this.userPhone = "(请输入手机号)"
				}


			},
		async toUpdateUserMessage() {
				// 上传头像,检验是否有上传头像的需求
				this.toOverlay = true
				if (this.tempFilePaths !== '' && this.tempFilePaths !== null) {
			await uni.$u.http.upload("/user/common/upload", {
						filePath: this.tempFilePaths[0],
						custom: {
							auth: true
						},
						name: 'file'
					}).then(res => {
						//获得头像在数据库的url
						this.userInfo.data.data.avatar = res.data.data
						//头像与用户绑定
					});
				}
				//用户名、性别、手机号与用户绑定
				if (this.userName !== "(请输入用户名)" && this.userName !== '') {
					this.userInfo.data.data.name = this.userName
				}else{
					this.toOverlay = false
					return uni.showToast({
						title: "昵称有误",
						icon: "error",
						duration: 1000
					})
				}
				if (this.userSex !== "(请选择性别)" && this.userSex !== '') {
					this.userInfo.data.data.sex = this.userSex
				}else{
					this.toOverlay = false
					return uni.showToast({
						title: "请选择性别",
						icon: "error",
						duration: 1000
					})
				}
				if (this.userPhone !== "( )" && this.userPhone !== '') {
					this.userInfo.data.data.phone = this.userPhone
				}else{
					this.toOverlay = false
					return uni.showToast({
						title: "手机号有误",
						icon: "error",
						duration: 1000
					})
				}
				// 统一更新用户信息
				uni.$u.http.put("/user/update", this.userInfo.data.data, {
					custom: {
						auth: true
					}
				}).then(result => {
					this.toOverlay = false
					uni.showToast({
						title: "修改成功",
						icon: "success",
						duration: 1000
					});
					uni.switchTab({
						url: '/pages/my/my',
						success() {
							 let page = getCurrentPages().pop();
							 page.onLoad();
						}
					});


				}).catch(err => {
					this.toOverlay = false
					uni.showToast({
						title: "修改失败",
						icon: "error",
						duration: 1000
					});
					this.userName = ''
					this.userPhone = ''
					this.userSex = ''
				})

			}

		},
		beforeMount() {
			this.avatarUrl = this.userInfo.data.data.avatar
			this.userName = this.userInfo.data.data.name
			this.userSex = this.userInfo.data.data.sex
			this.userPhone = this.userInfo.data.data.phone
		},
		mounted() {
			this.toJudgmentNull()
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}


	}
</script>

<style lang="scss">
	.userContainer {
		height: 1200rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.popupPage{
			height: 50%;
		}
		.userAvatar {
			height:40% ;
			display: flex;
			align-items: center;
		}
		.userOtherMessage{
			margin-top: 20%;
			width: 95%;
		}
		
	}
</style>